<template>
  <div class="container">
    <el-row>
      <el-col :span="4" class="grid-item">
        <el-form-item label="区域选择">
          <el-select v-model="form.orgManagerId" :disabled="isTopNode">
            <el-option
                v-for="item in Options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"

            />
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="7" class="grid-item">
        <el-form-item label="时间范围" style="font-weight: bold">
      <el-date-picker
        v-model="value2"
        type="datetimerange"
        :shortcuts="shortcuts"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
        </el-form-item>
      </el-col>


      <el-col :span="4" class="grid-item">
        <el-form-item label="违规类型">
          <el-select v-model="form.style" :disabled="isTopNode">
            <el-option
                v-for="item in Options2"
                :key="item.value1"
                :label="item.label"
                :value="item.value1"
            />
          </el-select>
        </el-form-item>
      </el-col>
    <el-button class="button1">查询</el-button>
    <el-button class="button1">导出</el-button>
    </el-row>
    <div class="all-area">
      <div class="area">
        <div>

        </div>
      </div>
      <div class="area">

      </div>
      <div class="area">

      </div>
      <div class="area">

      </div>

    </div>
  </div>

</template>

<script>
export default {
  name: "index",
  data() {
    return {
      // 表单参数
      form: {
        orgManagerId: null, // 初始化orgManagerId的值
        style:null
      },
      // 表单校验（移除orgManagerId的校验规则）
      rules: {
        // 其他需要校验的字段可以在这里定义
      },
      // 下拉框选项
      Options1: [
        { label: '区域1', value: 'area1' },
        { label: '区域2', value: 'area2' },
        { label: '区域3', value: 'area3' },

      ],
      Options2: [
        // 假设这里有一些选项数据
        { label1: '1', value1: '行人闯红灯' },
        { label1: '2', value1: '' },
        { label1: '3', value1: '' },
      ],
      // 是否禁用下拉框
      isTopNode: false, // 根据你的业务逻辑设置这个值
      shortcuts: [
        {
          text: '最近一周',
          value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
          },
        },
        {
          text: '最近一个月',
          value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
          },
        },
        {
          text: '最近三个月',
          value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            return [start, end]
          },
        },
      ],
      value1: [
        new Date(2000, 10, 10, 10, 10),
        new Date(2000, 10, 11, 10, 10),
      ],
      value2: '',
    }
  }
}
</script>

<style scoped>

.container {
  margin-top: 30px;
  margin-left: 50px;
}
.grid-item{
   margin-left: 50px;
  margin-right: 40px;
}
.all-area{
  margin-left: 50px;
}
.area{
  width: 290px;
  height: 260px;
  float: left;
  margin-right: 40px;
  border: 1px solid black;
}



</style>



